<template>
  <div class="menu">
    <h3>{{title}}</h3>
    <el-menu
      :default-active="active"
      class="el-menu-vertical-demo"
      background-color="#2A2F38"
      text-color="#fff"
      @select="select"
      :defaultOpeneds="del"
      :unique-opened="true"
      >
      <el-submenu :index="parse(item.id)" v-for="(item,idx) in list" :key="idx">
        <template slot="title">
          <span>{{item.areaName}}</span>
        </template>
        <el-menu-item :index="parse(c.id)" v-for="(c,i) in item.child" :key="i">
          <span class="item"></span>
          <span slot="title" class="nav-name" :title="c.areaName">
            {{c.areaName}}
          </span>
          <!-- <span slot="title">
            <el-tooltip v-if="c.areaName.length>9" class="tooltip-item" effect="dark" :content="c.areaName" placement="right-start">
              <el-button style="border-wiath: 0px">{{c.areaName}}</el-button>
            </el-tooltip>
            <span v-else>
              {{c.areaName}}
            </span>
          </span> -->
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '考证管理'
    },
    id: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      active: '',
      del: [],
      list: [],
      show: true
    }
  },
  methods: {
    changeActive (id) {
      if (!id) {
        this.del = []
        this.active = ''
      } else {
        this.active = id + ''
      }
    },
    select (id, path) {
      let name = ''
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].id === parseInt(path[0])) {
          for (let j = 0; j < this.list[i].child.length; j++) {
            if (this.list[i].child[j].id === parseInt(id)) {
              name = this.list[i].child[j].areaName
            }
          }
        }
      }
      this.$emit('select', id, name)
    },
    // 初始化，获取区域
    getArea () {
      let _areaName = sessionStorage.getItem('area')
      this.$http.getArea().then(res => {
        if (res.code === 20000) {
          if (_areaName && _areaName !== 'null') {
            this.list = res.data.child.filter(item => {
              return _areaName === item.areaName
            })
          } else {
            this.list = res.data.child
          }
          if (this.id) {
            for (let i = 0; i < this.list.length; i++) {
              if (this.list[i].id === parseInt(this.id)) {
                this.active = res.data.child[i].child[0].id + ''
                this.select(res.data.child[i].child[0].id, [res.data.child[i].id, res.data.child[i].child[0].id])
                this.del.push(res.data.child[i].id)
                this.del.push(res.data.child[i].child[0].id)
              }
            }
          } else {
            this.active = res.data.child[0].child[0].id + ''
            this.select(res.data.child[0].child[0].id, [res.data.child[0].id, res.data.child[0].child[0].id])
            this.del.push(res.data.child[0].id)
            this.del.push(res.data.child[0].child[0].id)
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    parse (i) {
      return (i + '')
    }
  },
  mounted () {
    this.getArea()
  }
}
</script>

<style lang="stylus" scoped>
  .menu
    h3
      color #fff
      padding-left 15px
      padding-top 5px
      padding-bottom 6px
    .item
      position absolute
      left 20px
      top 20px
      background #4177FF
      width 4px
      height 4px
      border-radius 50%
</style>

<style>
  .el-menu-item:hover {
    color: #4177FF !important;
  }
  .el-menu-item.is-active {
    color: #fff !important;
    background: #4177FF !important;
  }
  .el-menu-item.is-active .item {
    background: #fff;
  }
  .el-menu-item:hover .item {
    background: #fff;
  }
  .el-menu-item span:nth-child(2){
    display: inline-block;
    width: 130%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-menu-item span:nth-child(2) button {
    background: transparent;
    width: 100%;
    text-align: left;
    padding-left: 8px;
    border: 1px solid transparent;
  }
  .el-menu-item span:nth-child(2) button:hover {
    border: 1px solid transparent;
  }
  .el-menu-item span:nth-child(2) button span {
    width: 120%;
    display: inline-block;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* .el-submenu__title {
    width: 200px !important;
  } */
</style>

<style lang="scss" scoped>
.nav-name{
  width: 150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display: inline-block;
}
</style>
